// 机构管理
<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never" style="border:0px;">
      <div slot="header" style="font-size:14px;font-weight:bold;">
        <span>流程管理</span>
      </div>
      <div class="filter-container">
        <div class="left">
          <el-form :inline="true" :model="listQuery" class="demo-form-inline" size="medium" label-position="right" ref="listQuery" v-loading="loading">
            <el-form-item label="业务类型" prop="dataType">
              <DicSelect dictType="项目贷款类型" :dictValue="listQuery.dataType" v-on:dictValue="listQuery.dataType = $event"/>
            </el-form-item>
            <el-form-item label="状态" prop="processStatus">
              <el-select v-model="listQuery.processStatus" style="width:100%;" placeholder="请选择">
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listProcess()">查询</el-button>
              <el-button @click="restForm('listQuery')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <vxe-toolbar ref="xToolbar">
        <template #buttons>
          <el-button type="text" icon="el-icon-plus" @click="addWindow('modalUpdateForm')">新增</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        v-loading="loading"
        :data="queryData"
        border="none"
        highlight-hover-row
        show-header-overflow
        show-overflow
        align="center"
        :header-cell-style="{ background: '#F7F7F8', color: '#606266' }"
        @cell-dblclick="cellDblclick"
      >
        <vxe-table-column type="index" width="50" title="序号"></vxe-table-column>
        <vxe-table-column title="业务类型" field="dataTypeName" />
        <vxe-table-column title="流程图id" field="processKey"></vxe-table-column>
        <vxe-table-column title="描述" field="remark"></vxe-table-column>
        <vxe-table-column title="创建时间" field="createTime" ></vxe-table-column>
        <vxe-table-column title="状态" field="processStatus">
          <template slot-scope="scope">
           <span>
              <i class="smallCircle" :class="[scope.row.processStatus === true ? 'text_active' : 'text_noActive']"/>{{ scope.row.processStatus === true ? '启用' : '禁用' }}
            </span>
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作" fixed="right" width="150">
          <template v-slot="{ row }">
            <el-button type="text" @click="updateDeptWindow(row)">编辑</el-button>
            <el-button type="text" v-if="row.processStatus === true" @click="disableProcess(row)">禁用</el-button>
            <el-button type="text" v-else @click="enableProcess(row)">开启流程</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>

      <!--  新增流程 -->
      <vxe-modal
        @close="closeModal"
        v-model="modalAddOrUpdateWindow"
        width="700px"
        height="350px"
        :title="'新增&修改'"
        class="addModal">
        <el-form ref="modalUpdateForm" :model="modalUpdateForm" title-align="left" title-width="100" label-width="100px" style="width:80%;margin-top:10px;">
          <el-form-item label="业务类型" prop="dataType">
            <DicSelect dictType="项目贷款类型" :dictValue="modalUpdateForm.dataType" v-on:dictValue="modalUpdateForm.dataType = $event"/>
          </el-form-item>
          <el-form-item label="流程定义id" prop="processKey" :rules="[{ required: true, message: '请输入流程定义id' }]">
            <el-input v-model="modalUpdateForm.processKey" placeholder="请输入流程定义id" clearable></el-input>
          </el-form-item>
          <el-form-item label="描述信息" prop="remark">
            <el-input v-model="modalUpdateForm.remark" placeholder="最多可输入200字" type="textarea" maxlength="200" show-word-limit></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="saveOrUpdateProcess('modalUpdateForm')" status="primary">提交</el-button>
            <el-button @click="closeModal('modalUpdateForm')" status="danger">取消</el-button>
          </el-form-item>
        </el-form>
      </vxe-modal>
    </el-card>
    <vxe-pager
      class="pager"
      @page-change="changePage"
      :current-page.sync="listQuery.pageNo"
      :page-size.sync="listQuery.pageSize"
      :total="total"
      :page-sizes="[10, 30, 50, 100]"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
    >
    </vxe-pager>
  </div>
</template>

<script>
  import { listProcess,saveOrUpdateProcess,disableProcess,enableProcess} from '@/api/org';
  import DicSelect from '@/components/select/index'
  export default {
    name: 'orgIndex',
    components: { DicSelect },
    props: {
      orgId: undefined,
    },
    data: function () {
      return {
        active: 0,
        queryData: [],
        total: 0,
        listQuery: {
          pageNo: 1,
          pageSize: 10,
          orgId: undefined,
          processStatus: undefined,
        },
        loading: true,
        deptTree: [],
        deptManager: [],
        deptUser: [],
        modalUpdateForm: {
          id: undefined,
          orgId: this.orgId,
          processKey: undefined,
          dataType: undefined,
          remark: undefined,
        },
        modalAddOrUpdateWindow: false,
      };
    },
    mounted: function () {
      this.orgId = this.$route.query.orgId
      this.listProcess();
    },

    methods: {
      saveOrUpdateProcess(modalUpdateForm) {
        this.$refs[modalUpdateForm].validate((valid) => {
          if (valid) {
            // 提交
            this.modalUpdateForm.orgId = this.orgId
            saveOrUpdateProcess(this.modalUpdateForm).then((res) => {
              this.$notify.success({title: '成功',message: '操作成功',});
              this.listProcess();
              this.modalAddOrUpdateWindow = false;
            });
          } else {
            return false;
          }
        });
      },
      changePage() {
        this.listProcess();
      },

      closeModal(formName) {
        this.modalAddOrUpdateWindow = false;
        this.$refs[formName].resetFields();
        this.listProcess();
      },

      listProcess() {
        this.loading = true;
        this.listQuery.orgId = this.orgId
        listProcess(this.listQuery).then((data) => {
          this.queryData = data.data;
          this.total = data.total;
          this.loading = false;
        });
      },

      disableProcess(row) {
        this.loading = true;
        disableProcess({processId:row.id}).then((data) => {
          this.loading = false;
          this.listProcess();
        });
      },

      enableProcess(row) {
        this.loading = true;
        enableProcess({processId:row.id}).then((data) => {
          this.loading = false;
          this.listProcess();
        });
      },

      addWindow(formName) {
        this.modalAddOrUpdateWindow = true;
        this.$refs[formName].resetFields();
        this.modalUpdateForm={
            id: undefined,
            orgId: this.orgId,
            processKey: undefined,
            dataType: undefined,
            remark: undefined,
        }
        return false;
      },

      // 打开编辑窗口
      updateDeptWindow(row) {
        this.modalAddOrUpdateWindow = true;
        this.modalUpdateForm = row;
        return false;
      },


      restForm(formName) {
        this.$refs[formName].resetFields();
        this.listProcess();
      },
      cellDblclick({row,rowIndex,column,columnIndex,cell},event) {
        let _this = this;
        this.$copyText(event.target.innerText).then(function() {
          _this.$message.info('复制成功');
        });
      }
    },
  };
</script>

<style lang="scss">
  .addModal{
    .el-form-item__error {
      padding-top: 0;
      line-height: 0.7;
    }
  }

</style>
<style lang="css" scoped>
  .filter-container {
    display: flex;
    justify-content: space-between;
  }

  .pager{
    position: fixed;
    bottom: 0;
    right: 28px;
    background-color: #FAFAFB;
    z-index: 2;
    height: 40px;
    width: calc(100% - 260px);
  }

  .right >>> .el-button--primary,.el-button--default {
    padding: 10px 20px;
  }

  .vxe-table--render-default >>> .el-button--text{
    color: #2b7bfb;
  }
  .app-container >>> .vxe-table--render-default,.vxe-pager {
    font-family: PingFangSC, Arial, Helvetica, sans-serif;
  }

  .left {
    flex: 14;
    display: flex;
    flex-flow: row wrap;
    margin-right: 20px;
  }
  .left >>> .el-form {
    width: 100%;
  }
  .left >>> .el-form .el-form-item {
    display: flex;
    flex-flow: row nowrap;
    width: 30%;
    margin-right: 3%;
    float: left;
    margin-bottom: 14px;
  }

  .left >>> .el-form .el-form-item .el-form-item__label {
    font-weight: 500;
    color: #606266;
    text-align: left;
    /* flex: 1; */
  }

  .left >>> .el-form .el-form-item .el-form-item__content {
    flex: 1;
    /*超出部分隐藏*/
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    white-space: nowrap;
    /*规定段落中的文本不进行换行 */
    width: 100%;
  }
  .date_item {
    width: 100%;
  }
  .right {
    flex: 2;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    margin-right: 30px;
  }
</style>
